<template>
  <s-page custom-class="Rate-Page">
    <view class="container">
      <c-demo-block title="基础用法">
        <s-rate v-model="value1" />
      </c-demo-block>

      <c-demo-block title="自定义图标">
        <s-rate v-model="value2" icon="like" void-icon="like-o" />
      </c-demo-block>

      <c-demo-block title="自定义样式">
        <s-rate v-model="value3" :size="60" color="#FF1E1E" void-icon="star" void-color="#eee" />
      </c-demo-block>

      <c-demo-block title="半星">
        <s-rate v-model="value4" allow-half />
      </c-demo-block>

      <c-demo-block title="自定义数量">
        <s-rate v-model="value5" :count="6" />
      </c-demo-block>

      <c-demo-block title="颜色分层-数组形式">
        <s-rate
          v-model="value10"
          :color="[
            { value: 0, color: '#99A9BF' },
            { value: 3, color: '#F7BA2A' },
            { value: 5, color: '#FF1E1E' },
          ]"
        />
      </c-demo-block>

      <c-demo-block title="颜色分层-对象形式">
        <s-rate v-model="value10" :color="{ 0: '#99A9BF', 3: '#F7BA2A', 5: '#FF1E1E' }" />
      </c-demo-block>

      <c-demo-block title="图标分层-数组形式">
        <s-rate
          v-model="value11"
          :icon="[
            { value: 0, icon: 'star' },
            { value: 3, icon: 'good-job' },
            { value: 5, icon: 'like' },
          ]"
        />
      </c-demo-block>

      <c-demo-block title="图标分层-对象形式">
        <s-rate v-model="value11" :icon="{ 0: 'star', 3: 'good-job', 5: 'like' }" />
      </c-demo-block>

      <c-demo-block title="禁用状态">
        <s-rate v-model="value6" disabled />
      </c-demo-block>

      <c-demo-block title="只读状态">
        <s-rate v-model="value7" readonly />
      </c-demo-block>

      <c-demo-block title="只读状态显示小数">
        <s-rate v-model="value8" readonly allow-half />
      </c-demo-block>

      <c-demo-block title="监听 change 事件">
        <s-rate v-model="value9" @change="onChange" />
      </c-demo-block>
    </view>
  </s-page>
</template>

<script>
export default {
  data: () => ({
    value1: 3,
    value2: 3,
    value3: 3,
    value4: 2.5,
    value5: 3,
    value6: 3,
    value7: 3,
    value8: 3.3,
    value9: 3,
    value10: 3,
    value11: 3,
  }),
  methods: {
    onChange(value) {
      uni.showToast('当前值：' + value);
    },
  },
};
</script>

<style lang="scss">
page {
  background-color: $white;
}
.Rate-Page {
  .container {
    padding: 0 $padding-md;
  }
}
</style>
